/*
    创建者：shuxiaokai
    创建时间：2021-08-15 22:11
    模块名称：返回参数
    备注：
*/
<template>
  <s-base-info v-show="layout === 'horizontal'"></s-base-info>
  <s-res-info v-show="layout === 'horizontal'"></s-res-info>
  <s-loading :loading="!isResponse" :class="{ 'h-100': layout === 'vertical' }" class="w-100">
    <div v-show="remoteResponse.data.type" class="remote-response-wrap px-3 w-100" :class="{ vertical: layout === 'vertical' }">
      <el-tabs v-model="activeName" class="h-100 w-100">
        <el-tab-pane :label="$t('返回值')" name="s-body" class="w-100">
          <s-body class="h-100"></s-body>
        </el-tab-pane>
        <el-tab-pane :label="$t('请求信息')" name="s-request">
          <s-request class="h-100"></s-request>
        </el-tab-pane>
        <el-tab-pane name="s-headers">
          <template #label>
            <span>{{ $t("返回头") }}&nbsp;</span>
            <span v-if="headers.length > 0" class="orange">({{ headers.length }})</span>
          </template>
          <s-headers></s-headers>
        </el-tab-pane>
        <el-tab-pane name="s-cookie">
          <template #label>
            <span>Cookie&nbsp;</span>
            <span v-if="cookies.length > 0" class="orange">({{ cookies.length }})</span>
          </template>
          <!-- fix: 文字隐藏组件获取dom宽度失败 -->
          <s-cookie v-if="activeName === 's-cookie'"></s-cookie>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-empty v-show="!remoteResponse.data.type">
      <template #description>
        <div v-if="!loading">
          <div v-if="config.isElectron">{{ $t("点击发送按钮发送请求") }}</div>
          <div v-else>
            <div>
              <el-icon :size="18" class="orange mr-2">
                <Warning />
              </el-icon>
              <span>{{ $t("因浏览器限制，完整HTTP功能请下载Electron") }}</span>
            </div>
            <div class="mb-2">{{ $t("跨域、、请求头(user-agent,accept-encoding)等受限") }}</div>
            <div v-if="config.localization.download.enabled">
              <a :href="config.localization.download.url">{{ $t("下载Electron") }}</a>
            </div>
          </div>
        </div>
        <div v-if="loading">
          <span>{{ $t("总大小") }}：{{ formatBytes(process.total) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ $t("已传输") }}：{{ formatBytes(process.transferred) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ $t("进度") }}：{{ (process.percent * 100 ).toFixed(2) + "%" }}</span>
        </div>
      </template>
    </el-empty>
  </s-loading>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Warning } from '@element-plus/icons-vue'
import config from '@/../config/config'
import { store } from '@/store/index'
import { formatBytes } from '@/helper/index'
import sBaseInfo from './base-info/base-info.vue'
import sResInfo from './res-info/res-info.vue'
import sCookie from './cookie/cookie.vue'
import sHeaders from './headers/headers.vue'
import sBody from './body/body.vue'
import sRequest from './request/request.vue'

const activeName = ref('s-body');

const cookies = computed(() => store.state['apidoc/response'].cookies)
const headers = computed(() => {
  const { header } = store.state['apidoc/response'];
  const result: { key: string, value: string }[] = [];
  Object.keys(header).forEach(key => {
    result.push({
      key,
      value: header[key] as string,
    });
  })
  return result
})
const layout = computed(() => store.state['apidoc/baseInfo'].layout)
const remoteResponse = computed(() => store.state['apidoc/response'])
const loading = computed(() => store.state['apidoc/response'].loading) //数据是否完全返回
const isResponse = computed(() => store.state['apidoc/response'].isResponse) //接口是否响应
const process = computed(() => store.state['apidoc/response'].process)

</script>

<style lang="scss">
.remote-response-wrap {
    height: calc(100vh - #{size(310)});
    .el-tabs__content {
        height: calc(100% - 55px);
        .el-tab-pane {
            height: 100%;
        }
    }
    &.vertical {
        height: 100%;
        margin-top: size(15);
        .el-tabs__content {
            height: calc(100% - 55px);
            overflow-y: auto;
            .el-tab-pane {
                height: 100%;
            }
        }
    }
}
</style>
